import classNames from "classnames"
import * as React from "react"
import { componentClassName } from "../style"
import "./index.scss"

interface WhiteSpaceProps {
  size?: "xs" | "sm" | "md" | "lg"
}

export default function WhiteSpace(props: WhiteSpaceProps) {
  const { size = "md" } = props

  return <div className={classNames(componentClassName("whitespace"), {
    [componentClassName("whitespace-xs")]: "xs" === size,
    [componentClassName("whitespace-sm")]: "sm" === size,
    [componentClassName("whitespace-md")]: "md" === size,
    [componentClassName("whitespace-lg")]: "lg" === size,
  })}/>
}
